<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>

</head>
<body>
<div id="app">

</div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript">
        //1.在组件的DOM部分，任意的标签中  写上ref = 'xxx'
        //2.通常组件对象 this.$ref.xxx  获取到元素
        //------------------------
        //子组件，共$refs获取
        //$refs获取DOM元素
        var tempComponent = {
            props: ['title'],
            template: `<div>
                我是子组件 {{title}}
            </div>`
        };
        Vue.component('temp',tempComponent);
        var App = {
            template: `<div >
                <temp ref='temp' :title='title'></temp>
                <button ref = "btn">我是要获取的DOM元素</button>
            </div>`,
            data: function(){
                return {
                    title: '我是父组件传来的title'
                }
            },
            beforeCreate: function(){
                //这里还不操作数据，只是初始化了事件等
                console.log('beforeCreate+'+this.$refs.btn);
            },
            created: function(){
                //这里可以操作数据了
                console.log('created+'+this.$refs.btn);
            },
            beforeMount: function(){
                //new Vue发生装载 替换<div id='app'></div>之前
                console.log('beforeMount+'+this.$refs.btn);
            },
            mounted: function(){
                //装载数据之后
                console.log('mounted+'+this.$refs.btn);
                console.log(this.$refs.temp);
            }
        }
        //$属性：$refs 获取组件内的元素
        //$parent：获取当前组件对象的父组件
        //$children：获取子组件
        //$root：获取new vue的实例 vm
        //$el：组件对象的dom元素
        new Vue({
            el: '#app',
            components:{
                app: App
            },
            template: '<app/>'
        })
    </script>
</body>
</html>